<template>
  <div class="home-service" v-skeleton.animated="loading">
    <div class="box-card">
      <div class="available-service">
        <h5>已开通服务</h5>
        <ul class="service-list">
          <li v-skeleton-item v-for="(item, index) of serviceList" :key="index" @click="serveTo(item)">
            <div class="service-logo">
              <img src="@common/assets/logo.png" alt="" />
            </div>
            <span>{{ item.name }}</span>
          </li>
        </ul>
      </div>
      <div class="not-available-service">
        <h5>未开通服务</h5>
        <ul class="service-list">
          <li v-skeleton-item v-for="(item, index) of notServiceList" :key="index">
            <div class="service-logo">
              <img src="@common/assets/logo.png" alt="" />
            </div>
            <span>{{ item.name }}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue'
import { useRouter } from 'vue-router'
import mcCache from '@/common/utils/mc-get-cache'

export default defineComponent({
  name: 'homeService',
  components: {},
  // ----------------生命周期-----------------------
  setup() {
    const ROUTER = useRouter()
    const state = reactive({
      loading: false,
      serviceList: [
        {
          name: '呼叫中心',
          path: 'app'
        },
        {
          name: '客户管理',
          path: 'customer'
        }
      ],
      notServiceList: [
        {
          name: '语音机器人'
        }
      ]
    })

    const skeletonTest = () => {
      state.loading = true
    }

    const serveTo = (item: any) => {
      ROUTER.push({ path: item.path })
    }

    return {
      ...toRefs(state),
      skeletonTest,
      serveTo
    }
  }
})
</script>

<style lang="stylus">
.home-service
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    background: #FFFFFF;
    border-radius: 4px;
    flex: none;
    order: 2;
    align-self: stretch;
    flex-grow: 0;
    box-sizing border-box
    .box-card
      width 100%
      padding 20px 20px 0
      box-sizing border-box
    .available-service,.not-available-service
        h5
          margin 0
          width: 100%;
          height: 22px;
          font-style: normal;
          font-weight: 500;
          font-size: 16px;
          line-height: 22px;
          color: rgba(0, 0, 0, 0.88);
          flex: none;
          order: 0;
          flex-grow: 1;
        .service-list
            list-style none
            margin 0
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            padding: 16px 0px 16px;
            gap: 16px;
            width: 100%;
            flex: none;
            order: 1;
            align-self: stretch;
            flex-grow: 0;
            li
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              padding: 16px;
              gap: 8px;
              width: 120px;
              height: 120px;
              background: var(--mc-gray1-color);
              border-radius: 4px;
              flex: none;
              box-sizing border-box
              flex-grow: 0;
              .service-logo
                width: 40px;
                height: 40px;
                flex: none;
                order: 0;
                flex-grow: 0;
              span
                height: 20px;
                font-style: normal;
                font-weight: 400;
                font-size: 14px;
                line-height: 20px;
                display: flex;
                align-items: center;
                letter-spacing: 0.001em;
                color: rgba(0, 0, 0, 0.88);
                flex: none;
                order: 1;
                flex-grow: 0;
            li:hover
                background #eaf3fc
                color #409eff
                cursor pointer
</style>
